<template>
  <div class="userlogin">
    <aside class="a1">
    <form @submit.prevent="userlogin()">
        <h1>用户注册</h1>
        <p><input type="text" required placeholder="请输入用户名" v-model.lazy.trim="objU.uname"></p>
        <p><input type="tel" required placeholder="请输入手机号" v-model.lazy.trim="objU.tel"></p>
        <p><input type="email" required placeholder="请输入邮箱"  v-model.lazy.trim="objU.email"></p>
        <p><input  type="password" required placeholder="请输入密码" v-model.trim="objU.pwd"></p>
        <p><input  type="password" required placeholder="确认密码" v-model.trim="objU.pwd2"></p>
        <p class="p1"><input type="checkbox" required><span>是否同意本系统服务条款</span></p>
        <p class="p2"><button>注册</button><span>立即登录</span></p>
    </form>
    </aside>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    name : 'UserLogin',
    data(){
        return{
            objU:{
                uname:'',
                tel:0,
                email:'',
                pwd:'',
                pwd2:'',
            }
        }
    },
    methods:{     
    ...mapMutations(['adduser']),        
  
        userlogin(){
            if (this.objU.pwd ==this.objU.pwd2) {
            alert('注册成功');
            console.log(this.objU);
            
            }else{
                alert("两次密码不一致")
            }
             this.adduser(this.objU);
             this.$router.push('/login');
        }
    }
}
</script>

<style scoped>
.userlogin{
    width: 100%;
    height: 100%;
}
.a1{
    /* text-align: center; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.a1 form{
    width: 45%;
    border: 5px solid rgb(79, 203, 222);
    border-radius: 20px;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.a1 form h1{
    margin-bottom: 10px;
    text-align: center;
}
.a1 form p{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.a1 form p input{
    line-height: 35px;
    width: 80%;
    border-radius: 10px;
    border: 1px solid #978585a7;
    text-align: center;
}
.a1 form .p1 input{
    width:10%;
}
.a1 form .p2 button{
    border: 0;
    border-radius: 10px;
    background-color: rgb(79, 203, 222);
    width: 60%;
    line-height: 40px;
}
.a1 form .p2 span{
    font-size: 13px;
    color: #666;
}
</style>